<!-- 获取手机验证码 -->
<template>
	<button size="mini" @click="getCode" class="" :disabled="verDisabled">{{verifyCodeText}}</button>
</template>

<script>
	export default {
		name:'getCode',
		props:{
			phone:{
				type: String,
				default: ''
			}
		},
		data(){
			return {
				verifyCodeText: "获取验证码", //获取验证码按钮文本
				snsMsgWait: 60, //短信验证倒计时
				verDisabled: false, //获取短信验证码按钮禁用
			}
		},
		methods:{
			//确认电话号码可用性
			enterPhone: function() {
				let phone = this.phone;
				console.log(this.phone)
				if (phone == '') { //判断电话号码是否为空
					console.log(2)
					return false
				} else if (!(/^1[3|4|5|8][0-9]\d{8}$/.test(phone))) { //判断电话号码是否符合标准
					console.log(3)
					return false
				} else {
					console.log(4)
					return true;
				}
			},
			//获取手机验证码
			getCode() {
				let verifyCodeText = this.verifyCodeText;
				//判断按钮是否处于可点击状态
				if (verifyCodeText == '获取验证码' || verifyCodeText == '重新发送') {
					let trueTel = this.enterPhone();
					if (trueTel) { //电话号码可用时执行内容
						// 60秒后重新获取验证码
						let inter = setInterval(() => {
							this.verDisabled = true;
							this.verifyCodeText = this.snsMsgWait + 's';
							this.snsMsgWait--;
							//计时结束
							if (this.snsMsgWait < 0) {
								//停止执行
								clearInterval(inter);
								this.verifyCodeText = '重新发送';
								this.snsMsgWait = 60;
								this.verDisabled = false;
							}
						}, 1000);
					}
				}
			},
		}
	}
	
</script>

<style>
</style>
